<template>
    <div>
        <slot :data="data" :pagination="pagination" :loading="loading"  ></slot>
        <div class="text-center" style="padding: 10px;">
            <a-button v-if="hasMore" size="small" @click="loadMore" :loading="loading">
                <span style="font-size: 12px;">加载更多</span>
            </a-button>
        </div>
    </div>
</template>

<script>
  import {prefix} from '../config';
  export default {
    name: `${prefix}LoadMore`,
    props: {
      dataFun: Function,
      params: {
        type: Object,
        default () {
          return {};
        }
      }
    },
    data () {
      return {
        data: [],
        pagination: {
          pageSize: 10,
          current: 1,
          total: 0
        },
        loading: false
      };
    },
    created () {
      this.reload();
    },
    computed: {
      hasMore () {
        return this.pagination.total > this.data.length;
      }
    },
    methods: {
      getData (params) {
        this.loading = true;
        this.dataFun(params).then(ret => {
          let data = ret.data;
          const pagination = { ...this.pagination };
          pagination.total = Number(data.total);
          pagination.current = Number(data.current);
          this.loading = false;
          let tempData = [...this.data, ...data.records];
          this.data = tempData;
          this.pagination = pagination;
          this.$emit('afterLoad', this.data);
        });
      },
      reload (params = {}) {
        this.data = [];
        this.getData({
          size: this.pagination.pageSize,
          current: 1,
          ...this.params,
          ...params
        });
      },
      loadMore () {
        this.getData({
          size: this.pagination.pageSize,
          current: this.pagination.current + 1,
          ...this.params
        });
      }
    },
    mounted () {
    }
  };
</script>

<style scoped>

</style>